<template>
<view class="mar-0-0-36r-0" :class="{ mine: isMine }">
    <view class="between-align-start">
        <view class="flex-start" @click="handleClick">
            <view class="avatar-container">
                <image v-if="userInfo.headImg" :src="baseURL+userInfo.headImg" class="avatar-image"></image>
                <image v-else src="/static/defaultDoctor.png" class="avatar-image"></image>
            </view>
            <view class="user-details">
                <view class="doctor-name">{{userInfo.name}}</view>
                <view class="doctor-title" v-if="userInfo.deptName.length > 8">{{userInfo.deptName.substring(0, 8)}}... | {{userInfo.jobTitle}}</view>
                <view class="doctor-title" v-else>{{ userInfo.deptName }} | {{ userInfo.jobTitle }}</view>
            </view>
        </view>
        <view class="action-icons">
            <view class="icon-item" v-if="isHome">
                <u--image src="/static/home/scan.png" width="32rpx" height="32rpx"></u--image>
            </view>
            <view class="icon-item" v-if="isHome">
                <u--image src="/static/home/QRcode.png" width="32rpx" height="32rpx"></u--image>
            </view>
            <view class="icon-item" v-if="isMine" style="margin: 14rpx 0 0;">
                <u--image src="/static/home/bell-icon.png" width="36rpx" height="36rpx"></u--image>
            </view>
        </view>
    </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
	props: {
		isHome: {
			type: Boolean,
			default: false
		},
		isMine: {
			type: Boolean,
			default: false
		},
	},
    computed: {
        ...mapGetters(['userInfo']),
    },
    methods: {
        handleClick() {
            this.$emit('userInfoClick')
        }
    }
}
</script>

<style lang='scss' scoped>
    .avatar-container {
		width: 104rpx;
		height: 104rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 60rpx;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.doctor-title {
		font-size: 26rpx;
		color: #666;
	}

	.action-icons {
		display: flex;
		gap: 24rpx;
	}

	.icon-item {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mine {
		padding: 0 32rpx;
	}

	.mine .avatar-container {
		width: 120rpx;
		height: 120rpx;
	}

	.mine .doctor-name {
		font-size: 36rpx;
	}

	.mine .doctor-title {
		font-size: 28rpx;
	}
</style>
